<template>
  <div>
    <gc-spread-sheets class="spread-host" @workbookInitialized="initSpread">
    </gc-spread-sheets>
    <div class="options-container">
      <div class="option-row">
        <div class="inputContainer">
          <input
            type="file"
            id="fileDemo"
            class="input"
            @change="changeFileDemo"
          />
          <input
            type="button"
            id="loadExcel"
            value="import"
            class="button"
            @click="loadExcel"
          />
        </div>
        <div class="inputContainer">
          <input
            id="exportFileName"
            value="export.xlsx"
            class="input"
            @change="changeExportFileName"
          />
          <input
            type="button"
            id="saveExcel"
            value="export"
            class="button"
            @click="saveExcel"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import * as ExcelIO from "@grapecity/spread-excelio";
import { saveAs } from "file-saver";

// var SpreadJSKey = "Grapecity-Internal-Use,679326697252368#B1AZ3J6RLZHblVVc7QTNxwGRERTQWJjQ9IDV4YnavBzdytmZRNDNwc4QrA7TEFlQ43EbqJFTxJ4UjN7S5QkVyklQ9UmT4VDaEdDOrRGMvYWenJFVth7Ym56MDFVNq54baZnYXpVM7BHOvdlZFZEUB5GW4VHaBFTS9E6cEtkcLRDer46UwdTO85GTj56Tid5V6gTakxkZulGTxVGURlmeYVmR9EVePJXNsdEMyAzSMJUZBNnYXhzc0h6aW3EWjRVe4EVSsZmZ5l4MNZmav5EMshWU7wmRKRXZwVmZvokNvF4Qs9UV4dWd6xGSvVTSyZEWl54USJ4dKdTM8ImTQlnUFF6Q884ailkZ6MVMy2UcCd5Zph6ZiojITJCLiATQxgjN9gjI0ICSiwCMwATNyATNzETM0IicfJye#4Xfd5nIXR5QaJiOiMkIsIiNx8idgMlSgQWYlJHcTJiOi8kI1tlOiQmcQJCLiUzM5UjNwAyMwEDMzIDMyIiOiQncDJCLiI7au26YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwibj9SbvNmL9RXajVGchJ7ZuoCLwpmLvNmL9RXajVGchJ7ZuoiI0IyctRkIsIiLj9WSgkHdpNUZwFmcHJiOiEmTDJCLigjNzITNycTO6YjMzkzN6IiOiQWSiwSfdJSZsJWYUR7b6lGUislOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TP7hkR6R7ap3EVtdzTZp4R64GT09UdRdWdnh4Q6czSkZ4TP9GO4hjY5c7Y4F7c0FzSCNXNHZzNXRWWhdVY0xUMYV1T4J";;
// GC.Spread.Sheets.LicenseKey = SpreadJSKey;

// You need to license the ExcelIO module separately using the same license key
// ExcelIO.LicenseKey = SpreadJSKey;

export default {
  name: "App",
  methods: {
    initSpread: function (spread) {
      this.spread = spread;
      let sheet = this.spread.getActiveSheet();
      sheet
        .getCell(0, 0)
        .vAlign(GC.Spread.Sheets.VerticalAlign.center)
        .value("SpreadJS");
    },
    changeFileDemo(e) {
      this.importExcelFile = e.target.files[0];
    },
    changeExportFileName(e) {
      this.exportFileName = e.target.value;
    },
    loadExcel() {
      let spread = this.spread;
      let excelIo = new ExcelIO.IO();
      let excelFile = this.importExcelFile;
      excelIo.open(
        excelFile,
        function (json) {
          spread.fromJSON(json);
        },
        function (error) {
          console.log(error);
        }
      );
    },
    saveExcel() {
      let spread = this.spread;
      let excelIo = new ExcelIO.IO();
      let fileName = this.exportFileName || "export";
      if (fileName.substr(-5, 5) !== ".xlsx") {
        fileName += ".xlsx";
      }
      let json = spread.toJSON();
      excelIo.save(
        json,
        function (blob) {
          saveAs(blob, fileName);
        },
        function (error) {
          console.log(error);
        }
      );
    },
  },
};
</script>

<style>
.spread-host {
  width: 100%;
  height: 600px;
}
.inputContainer {
  width: 100%;
  height: auto;
  border: 1px solid #eee;
  padding: 6px 12px;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.options-container {
  width: 280px;
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  overflow: auto;
}
</style>